<template>
	<form  class="edit page">
	<view class="yf-form">
		<text class="label">姓名</text>
		<input v-model="user.name" class="inp" type="text" placeholder="真实姓名">
	</view>
	<view class="yf-form">
		<text class="label">手机号</text>
		<input v-model="user.phone" class="inp" type="text" placeholder="手机号">
	</view>
	
	 <picker mode="date" :value="user.birth" @change="bindDateChange" >
	<view class="yf-form">
		<text class="label">生日</text>
		<input disabled="disabled" v-model="birth" class="inp" type="text"">
	</view>
	 </picker>
	
	 
	                   
	
	<view class="btn" @click="update">
		保存
	</view>
	</form>
</template>

<script>
	import {getUserInfo,updateUser} from '@/api/user.js'
	import {parseTime} from '@/util/time'
	export default {
		created() {
					getUserInfo().then(res => {
						this.user = res.data
						console.log(this.user)
					})
		},
		computed:{
			birth(){
				return this.parseTime(this.user.birth)
			}
		},
		methods:{
			parseTime(date){
					if(!date){
						return
					}else{
					 return	parseTime(date,"{y}-{m}-{d}")
					}
			},
			 bindDateChange: function(e) {
			            this.user.birth = e.target.value
			        },
			update(){
				updateUser(this.user).then(res=>{
					this.$Router.back()
				})
			}
			
		},
		data(){
			return {
				user:{
					name:null,
					phone:null,
					birth:null
				}
			}
		}
	}
</script>

<style lang="stylus">
	.edit
		background-color #EFEFEF
		.yf-form
			border-bottom 1px solid #DCDCDC
			height 105upx
			background-color white
			display flex
			align-items center
			padding 0 30upx
			.label
					min-width 120upx
					color #6F6F6F
					font-size 28upx
					margin-right 40upx
			.inp
				width 100%
				font-size 28upx
				color #A1A1A1
		.btn
			position absolute
			bottom 20upx
			left 20upx
			right 20upx
			height:80upx;
			background:#F7895E
			border-radius:30px
			color #FFFFFF
			font-size 28upx
			display flex
			align-items center
			justify-content center
			margin-top 23upx
</style>
